Web►Overall

[Web] Google Map API簡易使用

Google MAP API常常需要使用，在此記錄一下一些基本用法。

引入

1
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

基本地圖

1
2
3
4
5
6
7
8
9
10
google.maps.event.addDomListener(window, 'load', function() {
	var mapdiv = document.getElementById('mymap');	//要顯示的div
	var myOptions = {
		zoom: 18,	//原始縮放
		center: new google.maps.LatLng(24.969481,121.192516),	//中心點
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		scaleControl: true               
	};
	var map = new google.maps.Map(mapdiv, myOptions);
});

標記地點

1
2
3
4
5
var marker = new google.maps.Marker({
	position: new google.maps.LatLng(24.969481,121.192516),
	map: map, 
	title: '中央大學'                                             
});

視窗說明

1
2
3
4
5
var infowindow = new google.maps.InfoWindow({
	content: '中央大學',
	size: new google.maps.Size(200, 200)
});
infowindow.open(map,marker);